<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HOP - 教育后台管理系统 - 主页</title>

    <meta name="keywords" content="HOP - 教育平台后台管理系统">
    <meta name="description" content="HOP - 教育平台后台管理系统">

    <link rel="shortcut icon" href="../../../public-tools/common/favicon.ico">
    <link href="../../../public-tools/pc/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../../public-tools/pc/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <!-- Morris -->
    <link href="../../../public-tools/pc/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
    <!-- Gritter -->
    <link href="../../../public-tools/pc/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
    <link href="../../../public-tools/pc/css/animate.min.css" rel="stylesheet">
    <link href="../../../public-tools/pc/css/style.min.css?v=4.1.0" rel="stylesheet">
    <style>[v-cloak] { display: none;}</style>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content" id="app" v-cloak>
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">今天</span>
                        <h5>日收入</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">{{toDaysMoney}} 元</h1>
                        <!--<div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i>
                        </div>-->
                        <!--<small>新用户</small>-->
                        <h3 class="no-margins">共 {{toDaysNumber}} 单</h3>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">{{month}} 月</span>
                        <h5>月收入</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">{{dateFormatMoney}} 元</h1>
                        <!-- <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>
                         </div>-->
                        <!--<small>6月</small>-->
                        <h3 class="no-margins">共 {{dateFormatNumber}} 单</h3>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">{{year}} 年</span>
                        <h5>年收入</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">{{yearMoney}} 元</h1>
                        <!--<div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i>
                        </div>-->
                        <!--<small>2019年</small>-->
                        <h3 class="no-margins">共 {{yearNumber}} 单</h3>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">总收入</span>
                        <!--<h5>订单</h5>-->
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">{{allMoney}} 元</h1>
                        <!--<div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i>
                        </div>-->
                        <!--<small>平台总用户量</small>-->
                        <h3 class="no-margins">共 {{allNumber}} 单</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>订单</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                <!--<button type="button" class="btn btn-xs btn-white active">天</button>
                                <button type="button" class="btn btn-xs btn-white">月</button>
                                <button type="button" class="btn btn-xs btn-white">年</button>-->
                                <button type="button" class="btn btn-outline btn-primary btn-sm" @click="refresh()">
                                    <i class="glyphicon glyphicon-refresh" aria-hidden="true"></i>
                                    刷新
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="flot-chart" style="height: 80vh;">
                                    <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                </div>
                            </div>
                            <!--<div class="col-sm-3">
                                <ul class="stat-list">
                                    <li>
                                        <h2 class="no-margins">2,346</h2>
                                        <small>订单总数</small>
                                        <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 48%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">4,422</h2>
                                        <small>最近一个月订单</small>
                                        <div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 60%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">9,180</h2>
                                        <small>最近一个月销售额</small>
                                        <div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 22%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                            </div>-->
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <script src="../../../public-tools/pc/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../../public-tools/pc/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../../public-tools/pc/js/plugins/echarts/echarts-all.js"></script>
    <script src="../../../public-tools/pc/js/plugins/flot/jquery.flot.js"></script>
    <script src="../../../public-tools/pc/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="../../../public-tools/pc/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="../../../public-tools/pc/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="../../../public-tools/pc/js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="../../../public-tools/pc/js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="../../../public-tools/pc/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="../../../public-tools/pc/js/content.min.js?v=1.0.0"></script>
    <script src="../../../public-tools/pc/js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="../../../public-tools/pc/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="../../../public-tools/pc/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <script src="../../../public-tools/pc/js/plugins/easypiechart/jquery.easypiechart.js"></script>
    <script src="../../../public-tools/pc/js/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="../../../public-tools/pc/js/plugins/layer/layer.min.js"></script>
    <script src="../../../public-tools/pc/js/vue/vue.js"></script>
    <script src="../../../public-tools/pc/js/vue/vue-resource.js"></script>
    <script src="../../../public-tools/common/js/common.js"></script>
    <script src="../js/utils/http.js"></script>
    <script src="../js/utils/api.js"></script>

    <script>

        var app = new Vue({
            el: '#app',
            data: {
                toDaysMoney:0.0,
                toDaysNumber:0,
                dateFormatMoney:0.0,
                dateFormatNumber:0,
                yearMoney:0.0,
                yearNumber:0,
                allMoney:0.0,
                allNumber:0,
                year:2019,
                month:1,
                stayPay:[],
                totalOrder:[],
                pay:[],
                refund:[],
            },
            //进入页面初始化方法
            created: function () {
                var that = this;
                var token = sessionStorageUtils.getJson(storageKey.sessionStorageKey.token);
                if(empty(token)){
                    layer.msg("<span style='color:red'>登录超时！请重新登录！</span>", {time: 1500, icon:5});
                    setTimeout(function () {
                        window.location.href = _LOGIN_PAGE;
                    },1200)
                    return ;
                }

                var date = new Date();

                that.year = date.getFullYear();
                that.month = date.getMonth() + 1;

                that.findPayOrder("toDays");
                that.findPayOrder("dateFormat");
                that.findPayOrder("year");
                that.findPayOrder("");

            },
            methods: {
                findPayOrder:function (findType) {
                    var that = this;
                    Get(that,_HOST+_API.wechat_order_findPayOrder+"?findType="+findType)
                        .then(function (response) {
                            // 响应成功回调
                            console.log(response)
                            if(response){
                                if(response.success){
                                    var list = response.list;
                                    if('toDays' == findType){
                                        for (var item in list) {
                                            that.toDaysMoney += list[item].payment;
                                        }
                                        that.toDaysMoney = parseFloat(that.toDaysMoney).toFixed(2);
                                        that.toDaysNumber = list.length;
                                    }else if('dateFormat' == findType){
                                        for (var item in list) {
                                            that.dateFormatMoney += list[item].payment;
                                        }
                                        that.dateFormatMoney = parseFloat(that.dateFormatMoney).toFixed(2);
                                        that.dateFormatNumber = list.length;
                                    }else if('year' == findType){
                                        for (var item in list) {
                                            that.yearMoney += list[item].payment;
                                        }
                                        that.yearMoney = parseFloat(that.yearMoney).toFixed(2);
                                        that.yearNumber = list.length;
                                    }else {
                                        for (var item in list) {
                                            that.allMoney += list[item].payment;
                                        }
                                        that.allMoney = parseFloat(that.allMoney).toFixed(2);
                                        that.allNumber = list.length;
                                    }
                                }else {
                                    layer.msg(response.msg, {time: 1500, icon:5});
                                }
                            }
                        })
                },
                findOrder:function (findType) {
                    var that = this;
                    Get(that,_HOST+_API.wechat_order_findOrder+"?findType="+findType)
                        .then(function (response) {
                            // 响应成功回调
                            console.log(response)
                            if(response){
                                if(response.success){
                                    that.stayPay = response.stayPay;
                                    that.totalOrder = response.totalOrder;
                                    that.pay = response.pay;
                                    that.refund = response.refund;
                                    createEcharts();
                                }else {
                                    layer.msg(response.msg, {time: 1500, icon:5});
                                }
                            }
                        })
                },
                refresh:function () {
                    window.location.reload();
                }
            }

        })

        setTimeout(function () {
            app.findOrder("year");
        },2000)

       function createEcharts() {
           option = {
               title : {
                   text: app.year+'年订单数据分析图',
                   subtext: ''
               },
               tooltip : {
                   trigger: 'axis'
               },
               legend: {
                   data:['待付款数','总订单数','已付款数','退款数']
               },
               toolbox: {
                   show : true,
                   feature : {
                       mark : {show: true},
                       dataView : {show: true, readOnly: false},
                       magicType : {show: true, type: ['line', 'bar']},
                       restore : {show: true},
                       saveAsImage : {show: true}
                   }
               },
               calculable : true,
               xAxis : [
                   {
                       type : 'category',
                       data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                   }
               ],
               yAxis : [
                   {
                       type : 'value'
                   }
               ],
               series : [
                   {
                       name:'待付款数',
                       type:'bar',
                       data:app.stayPay,
                       markPoint : {
                           data : [
                               {type : 'max', name: '最大值'},
                               {type : 'min', name: '最小值'}
                           ]
                       }
                   },
                   {
                       name:'总订单数',
                       type:'bar',
                       data:app.totalOrder,
                       markPoint : {
                           data : [
                               {type : 'max', name: '最大值'},
                               {type : 'min', name: '最小值'}
                           ]
                       }
                   },
                   {
                       name:'已付款数',
                       type:'bar',
                       data:app.pay,
                       markPoint : {
                           data : [
                               {type : 'max', name: '最大值'},
                               {type : 'min', name: '最小值'}
                           ]
                       }
                   },
                   {
                       name:'退款数',
                       type:'bar',
                       data:app.refund,
                       markPoint : {
                           data : [
                               {type : 'max', name: '最大值'},
                               {type : 'min', name: '最小值'}
                           ]
                       }
                   }
               ]
           };

           var dom = document.getElementById("flot-dashboard-chart");
           var myChart = echarts.init(dom);
           if (option && typeof option === "object") {
               myChart.setOption(option, true);
           }
       }

    </script>
</body>
</html>
